<div class="wrapper">
  <p>className: {{ courseInfo.className }}</p>
  <p>ssr_component: {{ courseInfo.ssr_component }}</p>
  <p>start_time: {{ courseInfo.start_time }}</p>
  <p>end_time: {{ courseInfo.end_time }}</p>
  <p>subject: {{ subject }}</p>
  <p>catalog: {{ catalog }}</p>
  <mat-form-field *ngIf="userInfo.id" style="width: 40%; margin-right: 2vw;">
    <input
      matInput
      placeholder="please input your review"
      [(ngModel)]="formData.reviewContent"
    />
  </mat-form-field>
  <button *ngIf="userInfo.id" mat-raised-button (click)="onSubmit()">submit</button>
  <table mat-table [dataSource]="reviews" class="mat-elevation-z8">
    <ng-container matColumnDef="Review">
      <th mat-header-cell *matHeaderCellDef> Review </th>
      <td mat-cell *matCellDef="let element"> {{element.review_content}} </td>
    </ng-container>
    <ng-container matColumnDef="Creator">
      <th mat-header-cell *matHeaderCellDef> Creator </th>
      <td mat-cell *matCellDef="let element"> {{element.userName}} </td>
    </ng-container>
    <ng-container matColumnDef="ClassName">
      <th mat-header-cell *matHeaderCellDef> ClassName </th>
      <td mat-cell *matCellDef="let element"> {{element.className}} </td>
    </ng-container>
    <ng-container matColumnDef="Subject">
      <th mat-header-cell *matHeaderCellDef> Subject </th>
      <td mat-cell *matCellDef="let element"> {{element.subject}} </td>
    </ng-container>
    <ng-container matColumnDef="Catalog">
      <th mat-header-cell *matHeaderCellDef> Catalog </th>
      <td mat-cell *matCellDef="let element"> {{element.catalog}} </td>
    </ng-container>
    <ng-container matColumnDef="CreateTime">
      <th mat-header-cell *matHeaderCellDef> CreateTime </th>
      <td mat-cell *matCellDef="let element"> {{element.timestamp}} </td>
    </ng-container>
    <ng-container matColumnDef="Operation">
      <th mat-header-cell *matHeaderCellDef> Operation </th>
      <td *matCellDef="let element"><button (click)="onHiddenReview(element)" *ngIf="userInfo.role === 'admin'" mat-raised-button>{{ element.visibility ? 'hidden' : 'show' }}</button></td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>
